<template>
  <div class="box" v-if="listData">
    <div class="header">
      <myheader></myheader>
    </div>
      <div class="main">
        <div class="top">
          <h1>我的简历</h1>
          <span class="iconfont jl_icon-roundadd" @click="createResume">创建简历</span>
        </div>
        <ul class="ul-list">
          <li v-for="(item,index) in listData.data.resumes" @click="changeCv(item._id)" :key="`resume${index}`">
            <div class="pic">
              <svg class="icon" aria-hidden="true">
                <use xlink:href="#icon-xinwendongtai"></use>
              </svg>
            </div>
            <p>{{item.name}}</p>
            <i class="iconfont jl_icon-pullright"></i>
          </li>
        </ul>
      </div>
  </div>
</template>
<script>
import {getList,createResume,changeDefaultId} from 'api';
export default {
  data(){
    return {
      listData:null,
    }

  },
  mounted(){
     this.getList();
  },
  methods:{
    async getList(){
      var result = await this.$promise.post(getList);
      if(result){
        this.listData = result;
      }
    },
    async changeCv(id){
      this.$promise.post(changeDefaultId,{
        id:id
      }).then(resp=>{
        if(resp.status==1){
          this.$router.push({path:"cv"})
        }
      })
    },
    async createResume(){
      var result  = await this.$promise.post(createResume);
      if(result){
        if(result.status==1){
          this.$message('创建成功');
          setTimeout(()=> {
             window.location.reload()
          }, 300);
        }else{
          this.$message(result.msg)
        }
      }
    }
  }
}
</script>
<style lang="scss" scoped>

  .main{
    padding:60px 20px 0;
    .top{
      display: flex;
      font-size: 14px;
      color: #666;
      justify-content: space-between;
      height: 40px;
      line-height: 40px;
      border-bottom: #ddd 1px solid;
      span{
        font-size: 12px;
        cursor: pointer;
        color: #999;
      }
      span:hover{
        color: #ffc44f;
      }
    }

  }
.ul-list{
  color:#666;
  margin-top: 20px;
  text-align: center;
  li{
    cursor: pointer;
    display: inline-block;
    padding:20px 10px;
    width: 160px;
    border: #f0f0f0 1px solid;
    background-color: #f0f0f0;
    border-radius:5px;
    margin: 0px 10px 20px 10px;
    position: relative;
    text-align: center;
    p{
      overflow: hidden;/*超出部分隐藏*/
      white-space: nowrap;/*不换行*/
      text-overflow:ellipsis;/*超出部分文字以...显示*/
    }
    .pic{
      display: block;
      color:#ccc;
      text-align: center;
      .icon{
        font-size: 80px;
      }
      img{
        width: 100px;
      }
    }
    i{
      display: block;
      font-size: 20px;
      color:#ccc;
    }
  }
  li:hover{
    background-color: #0568c5;
    border:#0568c5 1px solid;
    p{
      color:#fff;
    }
    i{
      color:#fff;
    }
  }
}
</style>

